<template>
    <el-row type="flex" class="row-bg" justify="center">
        <el-col class="el-col">
            <h3 style="color: white; font-weight: bold; font-size: 21px; margin: 0 0 20px 0;padding: 0">Spring security安全框架</h3>
            <el-form :model="form" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="username" style="width: 18rem;">
                    <el-input prefix-icon="el-icon-user" placeholder="用户名" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item prop="password" style="width: 18rem;">
                    <el-input prefix-icon="el-icon-lock" show-password placeholder="密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item prop="code" style="width: 18rem;">
                    <el-input prefix-icon="el-icon-picture-outline" v-model="form.code" placeholder="验证码"
                              :show-password="true" style="width: 10.8rem; float: left;" maxlength="5"></el-input>
                    <el-image class="captchaImg" :src="captchaImg" style="width: 6.7rem; float: left;"></el-image>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 18rem;" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
import {getCaptchaImg, toLogin} from "@/api/login";
import qs from 'qs'
export default {
    name: "Login",
    data() {
        return {
            form: {
                username: null, // 用户名
                password: null, // 密码
                code: null, // 验证码
                key: null, // 随机码
            },
            captchaImg: null, //图片
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, message: '密码长度至少 6 个字符', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                    {min: 5, max: 5, message: '验证码长度为 5 个字符', trigger: 'blur'}
                ],
            }
        }
    },
    mounted() {
        this.getCaptchaImg();
    },
    methods: {
        // 获取验证码和随机码
        getCaptchaImg() {
            getCaptchaImg().then((res) => {
                if (res.data.success){
                    this.form.key = res.data.data.key;
                    this.captchaImg = res.data.data.base64Img;
                }else {
                    this.$message.error("验证码获取失败！")
                }
            })
        },

        // 登录
        toLogin() {
            this.$axios.post('/login?'+ qs.stringify(this.form)).then((res) => {
                if (res.data.success){
                    // todo 登录成功
                    const jwt = res.headers['authorization']
                    this.$store.commit('SET_TOKEN', jwt)
                    this.$router.push('/index')
                }else {
                    this.$message.error(res.data.msg)
                }
            })
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.toLogin();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>

<style scoped>
.row-bg {
    background-image: url("/public/img/login_bk2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    /*background-color: #fafafa;*/
    height: 100vh;
    opacity: 0.9;
    filter: none;
}

.el-col {
    width: 22rem;
    margin: auto;
    /* 半透明黑色背景 */
    background-color: rgba(0, 0, 0, 0.30) !important;
    padding: 1rem 1.5rem 1rem 1.5rem;
    border-radius: 0.6rem;
    box-shadow: 0 0 10.8rem 0.2rem rgba(0, 0, 0, 0.1);
}

.demo-ruleForm {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: -10px;
}

.captchaImg {
    float: left;
    margin-left: 8px;
    border-radius: 4px;
}
</style>
